<template>
	<div><div>

    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
    <p v-bgcolor="{ color: 'green'}"><br><br></p>

    <div v-mydirect:hello.a.b="message"></div>

	</div></div>
</template>

<script>

export default {
  data () { 
    return {
      message:'Hello!'         
    } 
  },
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    },
    'bgcolor': function (el, binding) {
      // 设置指令的背景颜色
      el.style.backgroundColor = binding.value.color
    },
    'mydirect': {
      bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: '       + s(binding.name) + '<br>' +
          'value: '      + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: '   + s(binding.arg) + '<br>' +
          'modifiers: '  + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active {
  width: 100px;
  height: 100px;
  background: green;
}
.text-danger {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
